<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.real_name" placeholder="客户姓名" style="width: 130px;margin-top:8px" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-select v-model="listQuery.payway" placeholder="还款方式" class="filter-item" style="width:130px;margin-top:8px">
        <el-option label="还款方式" value="" />
        <el-option
          v-for="item in payway"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-select v-model="listQuery.collector_id" placeholder="选择催收员" filterable class="filter-item" style="width:130px;margin-top:6px">
        <el-option label="请选择催收员" value="" />
        <el-option
          v-for="item in collector"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-select v-model="listQuery.b_model" placeholder="放款模式" class="filter-item" style="width:130px;margin-top:6px">
        <el-option label="放款模式" value="" />
        <el-option label="正常" value="1" />
        <el-option label="买断" value="2" />
        <el-option label="绿通" value="3" />
      </el-select>
      <el-date-picker v-model="value1" style="width:150px" format="yyyy-MM-dd" type="datetime" placeholder="开始日期" />
      <el-date-picker v-model="value2" style="width:150px" format="yyyy-MM-dd" type="datetime" placeholder="结束日期" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter" style="margin-top:8px">查询</el-button>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="excelout" style="margin-top:8px" >导出</el-button>
      <!-- <excelout ></excelout> -->

    </div>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      size="mini"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
    <el-table-column label="还款时间" align="center" width="100">
        <template slot-scope="{row}">
          <span>{{ row.update_time}}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="资方" align="center" width="80">
        <template slot-scope="{row}">
          <span>{{ row.investor_name }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="类型" align="center" width="80">
        <template slot-scope="{row}">
          <span >{{ row.money_type }}</span>
        </template>
      </el-table-column>
      <el-table-column label="医院名称" align="center" width="220">
        <template slot-scope="{row}">
          <span>{{ row.merchant_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="客户姓名" align="center">
        <template slot-scope="{row}">
          <span>{{ row.real_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单时间" align="center" width="100px">
        <template slot-scope="{row}">
          <span>{{ row.create_time }}</span>
        </template>
      </el-table-column>
      <el-table-column label="项目金额" align="center">
        <template slot-scope="{row}">
          <span>{{ row.pro_money }}</span>
        </template>
      </el-table-column>
      <el-table-column label="分期" align="center" width="50px">
        <template slot-scope="{row}">
          <span>{{ row.total_period }}</span>
        </template>
      </el-table-column>
      <el-table-column label="模式" align="center" width="50px">
        <template slot-scope="{row}">
          <span>{{ row.model }}</span>
        </template>
      </el-table-column>
      <el-table-column label="首打" align="center">
        <template slot-scope="{row}">
          <span>{{ row.first }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="客户电话" align="center">
        <template slot-scope="{row}">
          <span>{{ row.mobile }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="对应期数" align="center" width="50">
        <template slot-scope="{row}">
          <span>{{ row.qs }}</span>
        </template>
      </el-table-column>
      <el-table-column label="本次还款金额" align="center">
        <template slot-scope="{row}">
          <span>{{ row.total_money }}</span>
        </template>
      </el-table-column>
      <el-table-column label="应还金额" align="center" width="90">
        <template slot-scope="{row}">
          <span >{{ row.total_money }}</span>
        </template>
      </el-table-column>
      <el-table-column label="已还金额" align="center">
        <template slot-scope="{row}">
          <span >{{ row.ppaid_money }}</span>
        </template>
      </el-table-column>
      <el-table-column label="利息" align="center">
        <template slot-scope="{row}">
          <span >{{ row.money_rate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="滞纳金" align="center" width="80">
        <template slot-scope="{row}">
          <span>{{ row.payment.late_fee }}</span>
        </template>
      </el-table-column>
      <el-table-column label="逾期天数" align="center" width="50">
        <template slot-scope="{row}">
          <span>{{ row.overdue_days }}</span>
        </template>
      </el-table-column>
      <el-table-column label="催收员" align="center" width="70">
        <template slot-scope="{row}">
          <span>{{ row.collector }}</span>
        </template>
      </el-table-column>
      <el-table-column label="还款状态" align="center">
        <template slot-scope="{row}">
          <span>{{ row.hk_name }}</span>
        </template>
      </el-table-column>

      <el-table-column label="支付渠道" align="center" width="80">
        <template slot-scope="{row}">
          <!-- <span v-if="row.pay_channel==1">支付宝</span>
          <span v-if="row.pay_channel==2">微信</span>
          <span v-if="row.pay_channel==3">银行转账</span> -->
          <span >{{row.payname}}</span>
        </template>
      </el-table-column>
      <el-table-column label="记账人" align="center" width="80px">
        <template slot-scope="{row}">
          <span>{{ row.admin_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" width="80px">
        <template slot-scope="{row}">
           <span v-if="row.is_bond==1">保证金</span>
        </template>
      </el-table-column>

      <!-- <el-table-column label="记账时间" align="center" width="120">
        <template slot-scope="{row}">
          <span>{{ row.create_time| formatDate }}</span>
        </template>
      </el-table-column> -->

    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

  </div>
</template>

<script>
import excelout from '@/components/excelout/index.vue'
import {
  searchPayment,
  getFinanceList,
  createPaymentRecord,
  deletePaymentRecord,
  getOrderPaymentType,
  getPayWay,
  exceloutday
} from '@/api/finance'
import waves from '@/directive/waves' // waves directive
import {
  formatDate
} from '@/utils/formatDate.js'
import {
    getAllList
  } from '@/api/user'
import {
  parseTime,getNodes
} from '@/utils'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
export default {
  name: 'ComplexTable',
  components: {
    Pagination,excelout
  },
  directives: {
    waves
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        0: '禁用',
        1: '启用'
      }
      return statusMap[status]
    },

    formatDate(time) {
      time = time * 1000
      const date = new Date(time)

      return formatDate(date, 'yyyy-MM-dd')
    },
    typeFilter(type) {
      return calendarTypeKeyValue[type]
    }
  },
  data() {
    return {
      nodes:[],
      action: process.env.VUE_APP_BASE_API + 'upload/file',
      myHeaders: {
        token: this.$store.getters.token
      },
      imageUrl: '',
      value1:'',
      value2:'',
      tableKey: 0,
      list: null,
      payway:[],
      collector:[],
      listCollectorQuery: {
          role_id: 8,
          page: 1,
          limit: 10
        },
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10,
        idcard: null,
        mobile: null,
        real_name: null,
        merchant_name: null
      },
      path: null,
      dialogImageVisible: false,
      sortOptions: [{
        label: 'ID Ascending',
        key: 'sale_id asc'
      }, {
        label: 'ID Descending',
        key: 'sale_id desc'
      }],
      statusOptions: ['published', 'draft', 'deleted'],
      showReviewer: false,
      temp: {
        type: '1',
        order_sn: '2020090619421673561',
        order_id: '',
        pay_id: [],
        total_money: 0,
        benjin: 0,
        service: 0,
        buy: 0,
        rate: 0,
        fine: 0,
        bad: 0,
        my_account: null,
        ta_account: null,
        out_trade_no: null,
        pay_method: null,
        pay_channel: null,

        images: [],
        status: '1'
      },
      sort_list: [],
      payment_record_list: [],
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: 'Edit',
        create: 'Create'
      },
      rules: {
        sort: [{
          required: true,
          message: '明细必须选择',
          trigger: 'change'
        }],
        order_sn: [{
          required: true,
          message: '订单号码必须输入',
          trigger: 'change'
        }],
        pay_id: [{
          required: true,
          message: '分期期数必须选择',
          trigger: 'blur'
        }],
        my_account: [{
          required: true,
          message: '我方账户必须输入',
          trigger: 'change'
        }],
        ta_account: [{
          required: true,
          message: '他方账号必须输入',
          trigger: 'change'
        }],
        out_trade_no: [{
          required: true,
          message: '交易流水必须输入',
          trigger: 'change'
        }],
        pay_method: [{
          required: true,
          message: '交易方式必须选择',
          trigger: 'change'
        }],
        pay_channel: [{
          required: true,
          message: '交易渠道必须选择',
          trigger: 'change'
        }]

      }
    }
  },
  created() {
    this.getPayWay();
    this.cacheQueryFormat();
    this.getList();
    this.getCollectorList();
    this.nodes = getNodes();
    //添加钩子，页面刷新
    window.addEventListener('beforeunload', e => this.beforeunloadFn(e))
  },
   mdestroyed() {
    //添加钩子，页面刷新
    window.removeEventListener('beforeunload', e => this.beforeunloadFn(e))
  },
  methods: {
    getCollectorList() {
        getAllList(this.listCollectorQuery).then(response => {
          this.collector = response.data
        })
      },
    beforeunloadFn(e) {
      //刷新页面事件
      sessionStorage.removeItem('finaceday');
    },
    cacheQueryFormat(){
      let cacheQuery = sessionStorage.getItem('finaceday');
      if(cacheQuery){
        this.listQuery = JSON.parse(cacheQuery);
      }
    },
    excelout() {
      this.listLoading = true
      this.listQuery.page = 1
      this.listQuery.limit = this.total
      exceloutday(this.listQuery).then(response => {
        this.listLoading = false
        const filepath = response.data.path
        window.location.href = filepath
      })
    },
    getPayWay(){
      getPayWay().then(res => {
        this.payway = res.data;
      })
    },
    handleClick(val) {
      this.temp.sort = null
      getOrderPaymentType(this.temp.type).then(res => {
        this.sort_list = res.data
      })
    },
    getList() {
      sessionStorage.setItem('finaceday',JSON.stringify(this.listQuery))
      this.listLoading = true
      getFinanceList(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.data.total
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 0.2 * 1000)
      })
    },
    handleFilter() {
      this.listQuery.date = this.value1
      this.listQuery.date_end = this.value2
      this.getList()
    }
  }
}
</script>
